<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  const html = `
  <div class="container">
    <header class="header" id="header">
      <nav>
        <li><a href="http://ssss.com">menu home home home</a></li>
        <li><a href="http://ssss.com">  menu user</a></li>
      </nav>
    </header>
    <main>
      <section>
        <ul>
          <li>select 1</li>
          <li>  select 2</li>
          <li>select 3  </li>
          <li>  select 3  </li>
        </ul>
      </section>
      <article>
        <div>some text</div>
      </article>
    </main>
    <footer>
      footer
    </footer>
  </div>
  `

  function findTag (str) {
    console.log(str)
    return str.match(/[a-zA-Z]+/)[0]
  }

  const tags = []

  html.replace(/<[^>]+>|((?<=(>)).*?(?=<))/g, (substring, sub, index) => {
    const tag = findTag(substring)

    tags.push({
      tag: tag,
      node: substring,
      children: []
    })

    return substring
  })

  console.log(tags)
</script>
</body>
</html>
